import React from 'react'
import { useHistory } from 'react-router-dom'
import { reqBlogs } from '../../../api'
import { useDataSource } from '../../Tag'
import dayjs from 'dayjs'

import { Card, Button, Table, Space, Tag, Popconfirm } from "antd"

function useColums() {

    const colums = [
        {
            title: '编号',
            dataIndex: ['blog', 'id'],
        },
        {
            title: '名称',
            dataIndex: ['blog', 'title'],
        },
        {
            title: '观看数',
            dataIndex: ['blog', 'views'],
            render: text => (<Tag color="red">{text}</Tag>)

        },
        {
            title: '分类',
            dataIndex: ['classes', 'name'],
        },
        {
            title: '标签',
            dataIndex: 'tags',
            render: (text) => {
                return text.map((item) => {
                    return (<Tag color={item.id % 2 === 0 ? 'lime' : 'green'} key={item.id}>{item.name}</Tag>)
                })
            }
        },
        {
            title: '创建时间',
            dataIndex: ['blog', 'createTime'],
            render: text => {
                return dayjs(text).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        {
            title: '更新时间',
            dataIndex: ['blog', 'updateTime'],
            render: text => {
                return dayjs(text).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        {
            title: '操作',
            key: 'action',
            render: text => (
                <Space size="small">
                    <a onClick={() => {
                    }}>编辑</a>
                    <Popconfirm
                        title="你确定要删除吗？"
                        onConfirm={() => console.log('ok')}
                        okText="Yes"
                        cancelText="No"
                    >
                        <a >删除</a>
                    </Popconfirm>
                </Space>
            )
        },
    ]

    return {
        colums
    }

}

function useBlogList() {
    const { dataSource, pageChange, total } = useDataSource(reqBlogs)
    return {
        dataSource,
        pageChange,
        total
    }
}

const BlogList = () => {

    const history = useHistory()

    const { dataSource, pageChange, total } = useBlogList()
    const { colums } = useColums()
    return (
        <Card size="small"
            extra={<Button type="link" onClick={() => {
                history.push('/admin/blog/edit')
            }} >添加博客</Button>}
            style={{ width: '100%' }}>
            <Table dataSource={dataSource}
                columns={colums}
                pagination={{
                    defaultPageSize: 7, pageSize: 7,
                    showQuickJumper: true,
                    total: total, onChange: pageChange,
                    showTotal: (total) => `共 ${total} 条`
                }}
                size="small"
                rowKey={(record) => {
                    return record.blog.id;
                }} />
        </Card>
    )
}

export default BlogList
